<template>
    <div class="imagePage">
        <van-nav-bar title="分享海报" left-text="" left-arrow @click-left="onClickLeft" :fixed="true" :placeholder="true" />
        <div class="poster">
            <van-image height="80vh"  fit="contain"
                :src="posterUrl" />
            <!-- <img :src="posterUrl" /> -->
            <!-- <a :href="posterUrl" download="posterUrl">
                <img :src="posterUrl" />
            </a> -->
        </div>
        <div class="longPush">长按海报保存到相册或分享好友</div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();
const posterUrl = ref('')
onMounted(() => {
    let poster = route.query.poster
    posterUrl.value = poster
    console.log(poster)
})
// 返回按钮
const onClickLeft = () => {
    router.back();
};
</script>
<style lang="scss" scoped>
.imagePage {
    padding: 20px;

    .poster {
        text-align: center;

        img {
            width: auto;
            height: 80vh;
        }
    }

    .longPush {
        color: #2CB9A4;
        text-align: center;
    }
}
</style>